<template>
  <div class="RecruiterEvaluate-content">
<!--    用工方评价-->
    <template v-if="valuateList.length>0">
      <div class="recruiterEvaluate-item" v-for="item in valuateList" :key="item.id" v-loading="valuateLoading">
        <div class="people-info">
          <img :src="item.user.avatar" alt="">
          <div class="name">
            {{ item.user.name }}
          </div>
        </div>
        <div class="evaluate">
          {{ item.comments }}
        </div>
        <div class="striping"></div>
      </div>
    </template>
    <el-empty v-else class="not-available" style=""></el-empty>
    </div>
</template>

<script>
import {commentsApi} from "@/api/supermarket";

export default {
  name: "RecruiterEvaluate",
  data(){
    return{
      valuateList:[],
      valuateLoading:false
    }
  },
  methods:{
    getComments() {
      this.valuateLoading = true
      commentsApi({page:1,limit:3,type:2,associated_id:this.id}).then((res) => {
        this.valuateList = res.list;
      }).finally(()=>{
        this.valuateLoading = false
      })
    },
  },
  mounted() {
    this.utils.createParams(this, this.$route.query);
    this.getComments()
  }
}
</script>

<style lang="scss" scoped>
.RecruiterEvaluate-content{
  //overflow: hidden;
  //text-overflow: ellipsis;
  //white-space: nowrap;
  .people-info{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    img{
      width: calc((100% - 40px)/9);
      margin-right: 15px;
    }
  }
  .evaluate{
    line-height: 45px;
  }
  .striping{
    margin: 10px 0;
    width: 100%;
    height: 1px;
    background-color: #D8D8D8;
  }
}

</style>
